<!DOCTYPE html>
<html lang="en">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1" charset="UTF-8">
        <title>爱音乐春季运动会</title>
        <link rel="stylesheet" href="./lib/jquery/jquery.mobile-1.4.5.min.css">
        <style>
            input:focus{
            -moz-box-shadow: 0 0 12px #387bbe /*{global-active-background-color}*/;
            -webkit-box-shadow: 0 0 12px #387bbe /*{global-active-background-color}*/;
            box-shadow: 0 0 12px #387bbe /*{global-active-background-color}*/;
            }
            .ui-block-a, .ui-block-b,.ui-block-c{
                height: 43px;
                font-weight: bold;
                padding: 10px;
            }
        </style>
        <script src="./lib/jquery/jquery-1.9.1.min.js"></script>
        <script src="./lib/jquery/jquery.mobile-1.4.5.min.js"></script>
        <script src="tool/share.js"></script>
        <script src="tool/config.js"></script>
        <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
        <script type="text/javascript">
            function check1(){
                $("#check").toggle();
            }
            //return true if checked or false
            function getCheckStatus(){
                return !($("#check")[0].style.display=="none");
            }
        </script>
    </head>
<body>

<img src="image/pointerup.png" style="position: fixed;left:91%;z-index: 999;width: 8%;display: none" id="pointerup">
<div data-role="page" style="background-image: url(images/luckypage.png);background-repeat: no-repeat;background-size:cover;">
    <div data-role="main" class="ui-content" style="position: fixed;top: 50%;left: 50%;right: 2%;background-image: url(image/50y.png);background-repeat: no-repeat;background-size: 100% 100%;height: 421px;margin-top: -225px;margin-left: -156px;width: 280px;overflow: hidden;">
        <a href="#" style="float: right;" onclick="window.location.href='lucky.html';"><img src="./images/close.png" style="width: 30px;"></a>
        <form method="post" action="demo_form.php" style="width: 240px;margin:0 auto;position: relative;bottom: -54%;">
            <input data-role="none" class="ui-body-d ui-corner-all ui-shadow-inset" type="text" name="phone" id="phone" placeholder="请输入天翼手机号码" style="background-image: none; min-height: 30px;  font-size: 16px; outline: 0; -webkit-transition: height 200ms linear; -moz-transition: height 200ms linear; -o-transition: height 200ms linear; transition: height 200ms linear; margin:.4em 0;width:90%;padding:4px 4px;line-height:26px; border: 1px solid #ddd;;color: #333;background-color: #af877a;" />   
            <input data-role="none" class="ui-body-d ui-corner-all ui-shadow-inset" name="verifycode" id="verifycode" value="" type="text" style="background-image: none; min-height: 30px;  font-size: 16px; outline: 0; -webkit-transition: height 200ms linear; -moz-transition: height 200ms linear; -o-transition: height 200ms linear; transition: height 200ms linear; margin:.4em 0;width:55%;padding:4px 4px;line-height:26px; border: 1px solid #ddd;;color: #333;background-color: #af877a;" placeholder="请输入验证码" />
            <!-- <a style="width:40%;float:right;margin-top: 4px;" data-mini="true" data-ajax="false" href="#" id="sendVerifyCode">
                <img src="images/verifybtn.png" style="width: 95px;height: 45px;">
            </a> -->
            <span style="display: inline-block;background-color: #fff;width: 74px;top: 3px;line-height: 34px;text-align: center;font-size: 25px;position: relative;border-radius: 5px;" id="syscode"></span>
            <div style="margin-top: 5px;text-align: center;">
                <div class="checkbox">
                    <img src="image/checkbox.png" style="position: absolute;left:0;top: 100px;">
                    <img src="image/check.png" style="position: absolute;left: 4px;top: 100px;" id="check">
                    <span style="display: inline-block;position: absolute;left:0;top:100px;width: 20px;height: 20px;" onclick="check1();"></span>
                </div>
                <label for="red" data-role="none" style="display: inline;">同意《会员服务条款》</label>                
            </div>
            <div style="margin-top: 10px;text-align: center;">
                <a style="width:30%;margin:0 auto;" data-mini="true" data-ajax="false" href="#" id="commitbtn"><img src="images/commit.png" style="width: 156px;height: 50px;"></a>
            </div>
        </form>
    </div>
    <div data-role="popup" id="popupView" class="ui-content" data-overlay-theme="b" data-history="false" data-position-to="window" data-dismissible="false"  data-corners="false" data-tolerance="30,15" style="background-image: url(image/getsuccess.png);background-size: 100% 100%;padding-bottom: 223px;padding-left: 60px;padding-right: 68px;border-radius: 33px;">
        <div style="text-align: center;position: relative;bottom: -190px;">
            <a href="#" data-rel="back" style="float: left;"><img src="image/back.png" style="width: 66px;height: 33px;float: left;"></a>&nbsp
            <a href="#" onclick="showShare();"><img src="image/xuan.png" style="width: 66px;height: 33px;"></a>             
        </div>
     </div>
</div>
<script type="text/javascript">
    function yzm(){
        var arr = ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z','a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z','0','1','2','3','4','5','6','7','8','9'];
        var str = '';
        for(var i = 0 ; i < 4 ; i ++ )
            str += ''+arr[Math.floor(Math.random() * arr.length)];
        return str;
    }

    $(document).ready(function(){
        var jssdk = window.jssdk;
        wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: jssdk.appId, // 必填，公众号的唯一标识
            timestamp: jssdk.timestamp, // 必填，生成签名的时间戳
            nonceStr: jssdk.nonceStr, // 必填，生成签名的随机串
            signature: jssdk.signature,// 必填，签名，见附录1
            jsApiList: [
                'onMenuShareTimeline',
                'onMenuShareAppMessage',
                'onMenuShareQQ',
                'onMenuShareWeibo'
            ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
        });

        wx.ready(function() {
            wx.onMenuShareAppMessage({
                title: "我在爱音乐春季运动会达到"+window.localStorage.getItem("score")+"分，够胆来挑，狗蛋勿点",
                desc:  window["shareObj"].decstr,
                link:  window["shareObj"].linkstr,
                imgUrl:  window["shareObj"].iconstr,
                trigger: function (res) {
                },
                success: function (res) {
                },
                cancel: function (res) {
                },
                fail: function (res) {
                }
            });
            //分享到朋友圈
            wx.onMenuShareTimeline({
                title: "我在爱音乐春季运动会达到"+window.localStorage.getItem("score")+"分，够胆来挑，狗蛋勿点",
                link:  window["shareObj"].linkstr,
                imgUrl:  window["shareObj"].iconstr,
                trigger: function (res) {
                },
                success: function (res) {
                },
                cancel: function (res) {
                },
                fail: function (res) {
                }
            });
        })
        wx.error(function (res) {
            console.log(res.errMsg);
        });

        function getUrlParam(name){
            var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
            var r = window.location.search.substr(1).match(reg);  //匹配目标参数
            if (r!=null) return unescape(r[2]); return null; //返回参数值
        } 


        var randomCode = yzm();
        $("#syscode").text(randomCode);

        $("#sendVerifyCode").click(function(){
            var phone = $.trim($("#phone").val());
            var myreg = /^(133|153|180|189|181|170|171|173|177|149)\d{8}$/;
            if (phone.length > 0) {
                if (!myreg.exec(phone)){
                    alert('请输入正确的天翼手机号码');
                    return false;
                }else{
                    $.post(API_ROOT+"sendRandomCode?debug="+API_DEBUG,{'phone':phone},function(result){
                        if(result.success){
                            alert("发送成功");
                        }else{
                            alert(result.msg);
                        }
                    });
                }
            }else{
                alert("请输入天翼手机号码");
                return false;
            }
            
        });

        $("#commitbtn").click(function(){
            var phone = $.trim($("#phone").val());
            var verifycode = $.trim($("#verifycode").val());
            var myreg = /^(133|153|180|189|181|170|171|173|177|149)\d{8}$/;
            if(phone.length > 0){
                if (!myreg.exec(phone)){
                    alert('请输入正确的天翼手机号码');
                    return false;
                }               
            }else{
                alert("请输入天翼手机号码");
                return false;
            }

            if(verifycode.length <= 0){
                alert("请输入验证码");
                return false;
            }

            if(!getCheckStatus()) {
                alert("请勾选同意条款");
                return false;
            }

            
            if($.trim(verifycode).toLowerCase() != randomCode.toLowerCase()){
                alert("请输入正确的验证码");
                return false;
            }

            $.ajax({
                'url': API_ROOT+"information?debug="+API_DEBUG,
                'type': 'POST',
                'dataType': 'JSON',
                'data': {"phone":phone, prizeLevel:getUrlParam('level')},
                'success': function(result){
                    if(result.success){
                        $("#popupView").popup();
                        $("#popupView").popup('open');
                    }else{
                        alert(result.msg);
                    }
                }
            });
        });


    });
</script> 
</body>
</html>
